<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子节点和子元素</title>
  <style>
    
  </style>
</head>
<body>
  <div id="box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>

  <script>
    //子节点 childNodes 文本节点+元素节点
    //子元素: children:所有的元素节点
    //父节点 parentNode 和 parentElement一样
    //父元素 parentElement 和 parentNode一样
    var box = document.getElementById("box");

    console.log(box.childNodes);
    console.log(box.children);
    
    //兼容拿取元素子元素
    function getChildEle(obj){
      var arr = [];
      for(var i = 0; i < obj.children.length; i++){
        if(obj.children[i].nodeType != 8){//不是comment节点
          arr.push(obj.children[i]);
        }
      }
    }
  </script>
</body>
</html>